<template>
  <div class="hairdresser">
    <div class="hairdresser_discount_package">
      <p class="hairdresser_p">选择发型师</p>
      <div class="hairdresser_discount_package_item">
        <flexbox :gutter="0">
          <flexbox-item :span="3" @click.native="$router.push('/hairstylistdetail')">
            <div class="discount_fuhao">
              <img src="../images/stylist.png" style="width: 64px;height: 64px;"/>
            </div>
          </flexbox-item>
          <flexbox-item :span="7.5" @click.native="$router.push('/hairstylistdetail')">
            <div class="discount_money">
              <span style="color: #a0a0a0;font-size: 14px;">擅长：</span>
              <span style="color: #333333;font-size: 14px;">数码烫 数码烫数码烫 数码烫数码烫数码烫数码烫</span>
            </div>
            <div>
              <x-button mini plain type="primary" style="margin-top: 5px;">发型师标签</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">技术很好</x-button>
            </div>
          </flexbox-item>
          <flexbox-item :span="1" @click.native="$router.push('/reservation')">
            <div class="discount_value">
              <img src="../images/btn_yuyue.png"/>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="hairdresser_discount_package_item">
        <flexbox :gutter="0">
          <flexbox-item :span="3" @click.native="$router.push('/hairstylistdetail')">
            <div class="discount_fuhao">
              <img src="../images/stylist.png" style="width: 64px;height: 64px;"/>
            </div>
          </flexbox-item>
          <flexbox-item :span="7.5" @click.native="$router.push('/hairstylistdetail')">
            <div class="discount_money">
              <span style="color: #a0a0a0;font-size: 14px;">擅长：</span>
              <span style="color: #333333;font-size: 14px;">数码烫 数码烫数码烫 数码烫数码烫数码烫数码烫</span>
            </div>
            <div>
              <x-button mini plain type="primary" style="margin-top: 5px;">发型师标签</x-button>
              <x-button mini plain type="primary" style="margin-top: 5px;">技术很好</x-button>
            </div>
          </flexbox-item>
          <flexbox-item :span="1" @click.native="$router.push('/reservation')">
            <div class="discount_value">
              <img src="../images/btn_yuyue.png"/>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, XButton} from 'vux'

  export default {
    name: "HairstyList",
    components: {
      Flexbox, FlexboxItem, XButton
    },
    data() {
      return {}
    }
  }
</script>

<style scoped>
  .hairdresser_p {
    font-size: 12px;
    color: #a0a0a0;
    margin: 15px 0 0 15px;
  }

  .hairdresser_discount_package_item {
    border: 1px solid #ccc;
    color: #333;
    border-radius: 3px;
    margin: 10px 15px;
    height: 80px;
  }

  .discount_fuhao {
    margin: 8px 10px;
  }

  .discount_value {
    margin: 0 8px;
  }

  .discount_value img {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 35px;
    margin-top: -20px;
  }
</style>
